<template>
  <div>
    <el-form label-width="100px" label-position="left" size="mini">
      <!-- 折叠公共配置 -->
      <el-collapse accordion>
        <!-- 标题设置 -->
        <el-collapse-item title="标题设置">
          <el-form-item label="标题">
            <el-switch v-model="activeOption.title.show"></el-switch>
          </el-form-item>
          <el-form-item label="标题">
            <el-input v-model="activeOption.title.text"></el-input>
          </el-form-item>
          <el-form-item label="字体颜色">
            <el-color-picker v-model="activeOption.title.textStyle.color"></el-color-picker>
          </el-form-item>
          <el-form-item label="字体大小">
            <el-input-number v-model="activeOption.title.textStyle.fontSize"></el-input-number>
          </el-form-item>
          <el-form-item label="字体位置">
            <el-select v-model="activeOption.title.left" placeholder="请选择">
              <el-option v-for="item in dictionary.textAlign" :key="item.value"
                         :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="副标题">
            <el-input v-model="activeOption.title.subtext"></el-input>
          </el-form-item>
          <el-form-item label="字体颜色">
            <el-color-picker v-model="activeOption.title.subtextStyle.color"></el-color-picker>
          </el-form-item>
          <el-form-item label="字体大小">
            <el-input-number v-model="activeOption.title.subtextStyle.fontSize">
            </el-input-number>
          </el-form-item>
        </el-collapse-item>
        <!-- 数值设置 -->
        <el-collapse-item title="数值设置">
          <el-form-item label="显示">
            <el-switch v-model="activeOption.extend.series.label.normal.show">
            </el-switch>
          </el-form-item>
          <el-form-item label="位置">
            <el-select v-model="activeOption.extend.series.label.normal.position" placeholder="请选择">
              <el-option v-for="item in dictionary.labelPosition" :key="item"
                         :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="字体大小">
            <el-input-number v-model="activeOption.extend.series.label.normal.fontSize">
            </el-input-number>
          </el-form-item>
          <el-form-item label="字体颜色">
            <el-color-picker v-model="activeOption.extend.series.label.normal.color">
            </el-color-picker>
          </el-form-item>
          <el-form-item label="字体粗细">
            <el-select v-model="activeOption.extend.series.label.normal.fontWeight" placeholder="请选择">
              <el-option v-for="item in dictionary.fontWeight" :key="item.value"
                         :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-collapse-item>
        <!-- 提示语设置  -->
        <el-collapse-item title="提示语设置">
          <el-form-item label="字体大小">
            <el-input-number v-model="activeOption.tooltip.textStyle.fontSize"></el-input-number>
          </el-form-item>
          <el-form-item label="字体颜色">
            <el-color-picker v-model="activeOption.tooltip.textStyle.color"></el-color-picker>
          </el-form-item>
        </el-collapse-item>
        <!-- 轴距离设置 -->
        <el-collapse-item title="坐标轴边距设置">
          <el-form-item label="左边距(像素)">
            <el-slider v-model="activeOption.grid.left" :max="400"></el-slider>
          </el-form-item>
          <el-form-item label="顶边距(像素)">
            <el-slider v-model="activeOption.grid.top" :max="400"></el-slider>
          </el-form-item>
          <el-form-item label="右边距(像素)">
            <el-slider v-model="activeOption.grid.right" :max="400"></el-slider>
          </el-form-item>
          <el-form-item label="底边距(像素)">
            <el-slider v-model="activeOption.grid.bottom" :max="400"></el-slider>
          </el-form-item>
        </el-collapse-item>
        <!-- 柱体设置 -->
        <el-collapse-item title="柱体设置">
          <el-form-item label="最大宽度">
            <el-slider v-model="activeOption.extend.series.barMaxWidth"
                       :max="200"></el-slider>
          </el-form-item>
          <el-form-item label="最小高度">
            <el-slider v-model="activeOption.extend.series.barMinHeight"
                       :max="100"></el-slider>
          </el-form-item>
        </el-collapse-item>
        <!-- 图例设置 -->
        <el-collapse-item title="图例操作">
          <el-form-item label="图例">
            <el-switch v-model="activeOption.legend.show"></el-switch>
          </el-form-item>
          <el-form-item label="位置">
            <el-select v-model="activeOption.legend.orient" placeholder="请选择">
              <el-option v-for="item in dictionary.orientList" :key="item.value"
                         :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="字体大小">
            <el-input-number v-model="activeOption.legend.textStyle.fontSize"></el-input-number>
          </el-form-item>
          <el-form-item label="字体颜色">
            <el-color-picker v-model="activeOption.legend.textStyle.color"></el-color-picker>
          </el-form-item>
        </el-collapse-item>
        <!-- 颜色设置 -->
        <el-collapse-item title="自定义配色">
          <el-button type="primary" @click="addColor" size="mini">添加</el-button>
          <el-table :data="dataColors" style="width: 100%">
            <el-table-column type="index"></el-table-column>

            <el-table-column prop="color" label="颜色">
              <template slot-scope="scope">
                <el-color-picker v-model="scope.row.color"></el-color-picker>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
              <template slot-scope="scope">
                <el-button @click.native.prevent="dataColors.splice(scope.$index, 1)"
                           type="text" size="small">
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </el-form>
  </div>
</template>

<script>

/**
 * echarts 参数微调组件
 */
export default {
    components: {},
    data() {
        return {
            map: null,
            // 一个全量的配置列表
            activeOption: {
                title: {
                    show: true,
                    text: '',
                    left: 'auto',
                    textStyle: {
                        color: '#333',
                        fontSize: 18
                    },
                    subtext: '',
                    subtextStyle: {
                        color: '#aaa',
                        fontSize: 12
                    }
                },
                tooltip: {
                    textStyle: {
                        color: '#fff',
                        fontSize: 14
                    }
                },
                grid: {
                    left: 10,
                    top: 60,
                    right: 10,
                    bottom: 60
                },
                legend: {
                    show: true,
                    orient: 'horizontal',
                    textStyle: {
                        fontSize: 12,
                        color: '#333'
                    }
                },
                extend: {
                    series: {
                        label: {
                            normal: {
                                show: false,
                                position: 'top',
                                fontSize: 12,
                                color: '#333',
                                fontWeight: 'normal'
                            }
                        },
                        barMaxWidth: 0,
                        barMinHeight: 0
                    }
                },
                colors: []
            },
            // 数据字典
            dictionary: {
                // 字体大小
                fontWeight: [
                    {label: 'normal', value: 'normal'},
                    {label: 'bold', value: 'bold'},
                    {label: 'bolder', value: 'bolder'},
                    {label: 'lighter', value: 'lighter'}],
                // 文字浮动
                textAlign: [
                    {label: '自动', value: 'auto'},
                    {label: '居中', value: 'center'},
                    {label: '左对齐', value: 'left'},
                    {label: '右对齐', value: 'right'}],
                // 图例方向
                orientList: [
                    {label: '竖排', value: 'vertical'},
                    {label: '横排', value: 'horizontal'}],
                // 标签显示位置
                labelPosition: [
                    {label: 'top', value: 'top'},
                    {label: 'left', value: 'left'},
                    {label: 'right', value: 'right'},
                    {label: 'bottom', value: 'bottom'},
                    {label: 'inside', value: 'inside'},
                    {label: 'insideLeft', value: 'insideLeft'},
                    {label: 'insideRight', value: 'insideRight'},
                    {label: 'insideTop', value: 'insideTop'},
                    {label: 'insideBottom', value: 'insideBottom'},
                    {label: 'insideTopLeft', value: 'insideTopLeft'},
                    {label: 'insideBottomLeft', value: 'insideBottomLeft'},
                    {label: 'insideTopRight', value: 'insideTopRight'},
                    {label: 'insideBottomRight', value: 'insideBottomRight'}]
            },
            // 颜色
            dataColors: [{'color': '#6395f9'}, {'color': '#64daab'}, {'color': '#657698'}, {'color': '#f6c02d'}, {'color': '#e96d5b'}],
            // 一般来说，不需要全部的参数，不同的图表，必要的参数不同
            requireOptions: {
                // 条形图必要配置：标题，提示语，页边距，图例，数值，颜色
                bar: ['title', 'tooltip', 'grid', 'legend', 'extend', 'colors'],
                // 瀑布图必要配置：标题，提示语，页边距，图例，数值，颜色
                waterfall: ['title', 'tooltip', 'grid', 'legend', 'extend', 'colors'],
                // 柱状图必要配置：标题，提示语，页边距，图例，数值，颜色
                histogram: ['title', 'tooltip', 'grid', 'legend', 'extend', 'colors'],
                // 折线图必要配置：标题，提示语，页边距，图例，数值，颜色
                line: ['title', 'tooltip', 'grid', 'legend', 'extend', 'colors'],
                // 环形图必要配置：标题，提示语，页边距，图例，数值，颜色
                ring: ['title', 'tooltip', 'grid', 'legend', 'extend', 'colors'],
                // 饼图必要配置：标题，提示语，页边距，图例，颜色
                pie: ['title', 'tooltip', 'grid', 'legend', 'colors'],
                // 雷达图必要配置：标题，提示语，页边距，图例，数值，颜色
                radar: ['title', 'tooltip', 'grid', 'legend', 'extend', 'colors'],
                // 漏斗图必要配置：标题，提示语，页边距，图例，数值，颜色
                funnel: ['title', 'tooltip', 'grid', 'legend', 'extend', 'colors'],

                // 热力图必要配置：标题，提示语，页边距，图例，数值，颜色
                heatmap: ['title', 'tooltip', 'grid', 'legend', 'extend', 'colors'],
                // 散点图必要配置：标题，提示语，页边距，图例，数值，颜色
                scatter: ['title', 'tooltip', 'grid', 'legend', 'extend', 'colors'],
                // K线图必要配置：标题，提示语，页边距，图例，数值，颜色
                candle: ['title', 'tooltip', 'grid', 'legend', 'extend', 'colors'],
                // 仪表盘必要配置：标题，提示语，页边距，图例，数值，颜色
                gauge: ['title', 'tooltip', 'grid', 'legend', 'extend', 'colors'],
                // 词云图必要配置：标题，提示语，页边距，图例，数值，颜色
                wordcloud: ['title', 'tooltip', 'grid', 'legend', 'extend', 'colors'],
                // 水球图必要配置：标题，提示语，页边距，图例，数值，颜色
                liquidfill: ['title', 'tooltip', 'grid', 'legend', 'extend', 'colors']

                // 并不是所有的
                // barList: ['bar', 'waterfall', 'histogram'],
                // titleList: ['bar', 'waterfall', 'histogram', 'pie', 'ring', 'line', 'radar', 'funnel', 'heatmap', 'candle'],
                // labelList: ['bar', 'waterfall', 'histogram', 'funnel', 'line', 'pie', 'ring', 'radar', 'scatter', 'heatmap', 'candle'],
                // legendList: ['bar', 'waterfall', 'histogram', 'pie', 'ring', 'line', 'gauge', 'radar', 'funnel', 'candle', 'liquidfill'],
                // colorList: ['bar', 'waterfall', 'histogram', 'pie', 'ring', 'line', 'funnel', 'scatter', 'radar', 'candle'],
                // tipList: ['bar', 'waterfall', 'histogram', 'pie', 'ring', 'line', 'funnel', 'scatter', 'radar', 'heatmap', 'candle'],
                // postionList: ['bar', 'waterfall', 'histogram', 'line', 'pictorialbar', 'heatmap', 'candle']
            },
            // 简单图表
            simpleChart: [
                {value:'line', label: '折线图'},
                {value:'histogram', label: '柱状图'},
                {value:'bar', label: '条形图'},
                {value:'pie', label: '饼图'},
                {value:'ring', label: '环形图'},
                {value:'waterfall', label: '瀑布图'},
                {value:'funnel', label: '漏斗图'},
                {value:'radar', label: '雷达图'}],
            // 复杂图表
            complexChart: [
                {value: 'heatmap',label: '热力图'},
                {value: 'scatter',label: '散点图'},
                {value: 'candle',label: 'K线图'},
                {value: 'gauge',label: '仪表盘'},
                {value: 'wordcloud',label: '词云图'},
                {value: 'liquidfill',label: '水球图'}],
        };
    },
    mounted() {
    },
    methods: {
        validProp(name) {
            // return this.dictionary[name].includes(this.inputForm.type)
            return true;
        },
        addColor() {
            this.dataColors.push({'color': '#6395f9'})
        }
    },

};
</script>

